<template>
  <section>
    <el-form ref="editForm" :model="editForm" label-width="100px" @submit.prevent="onSubmit"
             style="margin:20px;min-width:600px;">

      <el-form-item label="类型">
        <el-select v-model="editForm.type" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="名称">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editForm.name" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：成人票</span>
        </template>
      </el-form-item>

      <el-form-item label="标题">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editForm.title" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：开开农场线下体验成人票</span>
        </template>
      </el-form-item>

      <el-form-item label="单价">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editForm.price" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：59(元)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="同行人数">
        <template slot-scope="scope">
          <div style="width: 300px;display: inline-block;">
            <el-input v-model="editForm.max_people" auto-complete="on"></el-input>
          </div>
          <span style="margin-left: 10px;color: #48576A;">例如：3(人)-输入数字</span>
        </template>
      </el-form-item>

      <el-form-item label="费用包含">
        <template>
          <div style="width: 600px;">
            <el-input type="textarea" v-model="editForm.desc.contain"></el-input>
          </div>
        </template>
      </el-form-item>

      <el-form-item label="费用不包含">
        <template>
          <div style="width: 600px;">
            <el-input type="textarea" v-model="editForm.desc.not_contain" :rows="2"></el-input>
          </div>
        </template>
      </el-form-item>

      <el-form-item label="入场须知">
        <template>
          <div style="width: 600px;">
            <el-input type="textarea" v-model="editForm.desc.enter_notice" :rows="4"></el-input>
          </div>
        </template>
      </el-form-item>

      <el-form-item label="退票规则">
        <template>
          <div style="width: 600px;">
            <el-input type="textarea" v-model="editForm.desc.quit_rule"></el-input>
          </div>
        </template>
      </el-form-item>

      <el-form-item label="上架" prop="day_pic_manage_status">
        <el-switch v-model="editForm.is_sale" on-color="#13ce66" off-color="#ff4949" on-value="1" off-value="0"></el-switch>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click.native="editTicket">立即创建</el-button>
      </el-form-item>

    </el-form>
  </section>
</template>

<script type="text/ecmascript-6">
  import { apiTree } from '../../apiTree'
  import NProgress from 'nprogress'
  import util from '../../util'

  export default {
    data() {
      return {
        options: [
          {value: '1', label: '门票'},
          {value: '2', label: '套餐票'}
        ],
        editForm: {
          id: 0,
          type: '',
          name: '',
          title: '',
          desc: {
            contain: '', // 费用包含
            not_contain: '', // 费用不包含
            enter_notice: '', // 入场须知
            quit_rule: '' // 退票规则
          },
          price: 0, // 单价
          max_people: 0, // 最大同行人数
          is_sale: '1' // 是否上架
        }
      }
    },
    methods: {
      editTicket: function () {
        this.$confirm('确认提交吗？', '提示', {}).then(() => {
          if (util.isEmpty(this.editForm.type)) {
            this.$message.error('选择类型');
            return
          }
          if (util.isEmpty(this.editForm.name)) {
            this.$message.error('输入门票名称');
            return
          }
          if (util.isEmpty(this.editForm.title)) {
            this.$message.error('输入门票标题');
            return
          }
          if (util.isEmpty(this.editForm.desc.contain)) {
            this.$message.error('输入门票标题');
            return
          }
          if (util.isEmpty(this.editForm.desc.not_contain)) {
            this.$message.error('输入门票标题');
            return
          }
          if (util.isEmpty(this.editForm.desc.enter_notice)) {
            this.$message.error('输入门票标题');
            return
          }
          if (util.isEmpty(this.editForm.desc.quit_rule)) {
            this.$message.error('输入门票标题');
            return
          }
          if (util.isEmpty(this.editForm.price) || !util.isInt(this.editForm.price)) {
            this.$message.error('输入正确的价格！')
            return
          }
          if (!util.isInt(this.editForm.max_people)) {
            this.$message.error('输入正确的同行人数！')
            return
          }
          NProgress.start();
          let param = {'data': this.editForm};
          apiTree('ticket/ticket', 'ticket/setTicket', param, 'POST').then((res) => {
            if (res.s === 1) {
              this.$message({
                message: '提交成功',
                type: 'success'
              });
              this.$router.push('/ticket/ticket');
            } else {
              this.$message.error(res.err_str);
            }
          })
        })
      },
      editList: function () {
        let param = {'id': this.$route.params.id}
        apiTree('ticket/ticket', 'ticket/editInfo', param).then((res) => {
          this.editForm = res.d
          this.editForm.price = parseInt(res.d.price) / 100
        })
      },
    },
    created() {
      this.editList()
    },
  }

</script>

<style lang="stylus" rel="stylesheet/stylus">
  .p-listPic-upload
    display inline-block
    margin-left 10px
    position relative
    cursor pointer
    .upload_plant_pic
      display block
      width 80px
      height 35px
      cursor pointer
      position absolute
      top 0px
      left 0px
      opacity 0
      & input[type=file]
        display block
        cursor pointer
        width 80px
        height 35px
  .p-pic-old-input
    display inline-block
    width 500px
</style>
